<template>
    <div id="" class="schu">
        删除车辆

      <!--车辆详情-->
      <div>
        <ul class="xq">
          <li>
            <div>编号</div>
            <div v-for="item in xiangqing">{{item.serial_number}}</div>
          </li>
          <li>
            <div>车辆品牌</div>
            <div v-for="item in xiangqing">{{item.manufacturing_company}}</div>
          </li>
          <li>
            <div>购买时间</div>
            <div v-for="item in xiangqing">{{item.purchasing_data}}</div>
          </li>
          <li>
            <div>车牌号</div>
            <div v-for="item in xiangqing">{{item.license_plate_number}}</div>
          </li>
          <li>
            <div>车辆类型</div>
            <div v-for="item in xiangqing">{{item.model_of_car}}</div>
          </li>
          <li>
            <div>总里程</div>
            <div v-for="item in xiangqing">{{item.the_total}}</div>
          </li>
          <li>
            <div>油耗</div>
            <div v-for="item in xiangqing">{{item.fuel_consumption}}</div>
          </li>
          <li>
            <div>基本费用</div>
            <div v-for="item in xiangqing">{{item.basic_maintenance_cost}}</div>
          </li>
          <li>
            <div>养路费</div>
            <div v-for="item in xiangqing">{{item.road_toll}}</div>
          </li>
          <li>
            <div>总费用</div>
            <div v-for="item in xiangqing">{{item.cumulative_total_cost}}</div>
          </li>
          <li>
            <div>核载人数</div>
            <div v-for="item in xiangqing">{{item.busload}}</div>
          </li>
          <li>
            <div>箱数</div>
            <div v-for="item in xiangqing">{{item.carton_numbers}}</div>
          </li>
          <li>
            <div>载重</div>
            <div v-for="item in xiangqing">{{item.load_capacity}}</div>
          </li>
          <li>
            <div>删除</div>
            <div v-for="(item,index) in xiangqing"><mt-button type="default" @click="schu(index)">删除</mt-button></div>
          </li>

        </ul>
      </div>
    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "number_vehicles",
      data(){
          return{
            xiangqing:[/*假数据*//*  {"serial_number":"002","manufacturing_company":"奔驰","license_plate_number":"湘Q.A8A89",
                "purchasing_data":"2016-11-18 13:51","model_of_car":"小轿车","the_total":"110km",
                "fuel_consumption":"0.8L/km","basic_maintenance_cost":"1000","road_toll":"100",
                "cumulative_total_cost":"1100","busload":"","carton_numbers":"2","load_capacity":""},
              {"serial_number":"004","manufacturing_company":"东风","license_plate_number":"湘Q.A8A78","purchasing_data":"2016-08-18 13:54","model_of_car":"大卡车","the_total":"130km","fuel_consumption":"1.8L/km","basic_maintenance_cost":"1500","road_toll":"120","cumulative_total_cost":"1620","busload":"","carton_numbers":"","load_capacity":"16t"},
              {"serial_number":"007","manufacturing_company":"奇瑞","license_plate_number":"湘X.78A86","purchasing_data":"2016-03-17 13:59","model_of_car":"大客车","the_total":"155km","fuel_consumption":"1.4L/km","basic_maintenance_cost":"1200","road_toll":"110","cumulative_total_cost":"1310","busload":"42","carton_numbers":"","load_capacity":""}
         */   ],
          }
      },
      created(){
          this.getchusi();
      },
      methods:{
        //请求初始信息
        getchusi:function () {
          var url = "../../../static/home.json";
          this.$http.get(url).then(function (response) {
            if(response.body.status != 0){
              Toast({  //mint-ui 提示
                message: '数据异常',
                position: 'bottom',
                duration: 5000
              });
            }
            this.xiangqing = response.body.che;

          })
        },
        schu:function (f) {//f 点击那行的 index
          //提醒用户是否删除数据
          if(!confirm('是否删除数据')){
            return;//当用户点击取消 应阻断这个方法的 后面代码的执行
          }
          //暂时 无api 接口
         /* var url = "api"+f;
          this.$http.get(url).then(function (response) {
            if(response.body.status !=0){
              alert(response.body.message);
              return;
            }
            //假删除
            //this.xiangqing.splice(f,1)
            //php作删除操作


          })*/
          //刷新列表
          this.getchusi();


        }
      }
    }
</script>

<style scoped>
  .mint-button{
    background-color: rgba(255, 0, 0, 0.67);
    color:white;
    height: 100%;font-size: 12px;vertical-align: middle}
  .schu{width: 100%}
  .xq{
    padding: 10px 4px;
    width: 100%;
    font-size:12px;
    display: flex;
    justify-content: space-between;
  }
  .xq>li{
    padding: 3px 2px;
    text-align: left;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }
  .xq{
    padding: 10px 4px;
    width: 100%;
    font-size:12px;
    display: flex;
    justify-content: space-between;
  }
  .xq>li{
    padding: 3px 2px;
    text-align: left;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }

</style>
